<template>
    <div class="footer">
        <van-tabbar v-model="active">
            <van-tabbar-item icon="wap-home" url="#/">首页</van-tabbar-item>
            <van-tabbar-item icon="label" url="#/types">分类</van-tabbar-item>
            <van-tabbar-item icon="video" url="#/videos">视频</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart" url="#/Cart">购物车</van-tabbar-item>
            <van-tabbar-item icon="manager" url="#/my">我的</van-tabbar-item>
    </van-tabbar>   
</div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
    computed: {
        active: {
            get() {
                return this.$store.state.active
            },
            set(val) {
                this.$store.commit('changeActive', val)
            }
        }
    },
}
</script>

<style>

.van-tabbar{
    margin: 0 10px;
    width:95%;
}
</style>